import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import '../../helper/utils/methodchannelmanager.dart';
import '../../helper/utils/util.dart';
import 'logic.dart';
import 'views/SlideVerifyWidget.dart';

class PasswordloginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final logic = Get.put(PasswordloginLogic());
    final state = Get.find<PasswordloginLogic>().state;

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0,
        leading: IconButton(
            onPressed: Get.back,
            icon: Icon(
              IconUtil.wrong,
              size: 15.r,
              color: ColorsUtil.content,
            )),
      ),
      backgroundColor: Colors.white,
      body: GetBuilder<PasswordloginLogic>(
        builder: (logic) {
          return Container(
            margin: EdgeInsets.only(top: 10.r),
            child: SingleChildScrollView(
              physics: const ClampingScrollPhysics(),
              child: Column(
                // physics: const ClampingScrollPhysics(),
                children: [
                  Container(
                    decoration: const BoxDecoration(
                      color: Colors.white,
                    ),
                    padding: EdgeInsets.symmetric(horizontal: 30.r),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Container(
                          margin: EdgeInsets.only(top: 10.r),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                state.loginType == 0 ? '密码登录' : '短信验证码登录',
                                style: TextStyle(
                                  color: ColorsUtil.title,
                                  fontSize: 20.r,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                              SizedBox(
                                height: 3.r,
                              ),
                              Text(
                                state.loginType == 0 ? '' : '未注册手机验证后自动登录',
                                style: TextStyle(
                                  color: ColorsUtil.content,
                                  fontSize: 12.r,
                                ),
                              ),
                            ],
                          ),
                        ),
                        Container(
                          margin: EdgeInsets.only(top: 50.r),
                          height: 44.r,
                          child: TextField(
                            controller: state.nameCotroller,
                            // keyboardType: TextInputType.phone,

                            decoration: InputDecoration(
                              contentPadding:
                                  EdgeInsets.symmetric(horizontal: 10.r),
                              enabledBorder: OutlineInputBorder(
                                borderSide: const BorderSide(
                                    color: ColorsUtil.dd, width: 0.5),
                                borderRadius: BorderRadius.circular(5),
                              ),
                              focusedBorder: OutlineInputBorder(
                                borderSide: const BorderSide(
                                    color: ColorsUtil.theme, width: 0.5),
                                borderRadius: BorderRadius.circular(5),
                              ),
                              hintText: state.loginType == 0 ?'请输入账号':'请输入手机号',
                              hintStyle: TextStyle(
                                fontSize: 16.sp,
                                color: const Color(0xffdddddd),
                              ),
                            ),
                          ),
                        ),
                        Visibility(
                          visible: state.loginType == 1,
                          child: Container(
                            margin: EdgeInsets.symmetric(vertical: 15.r),
                            child: SlideVerifyWidget(

                              width: 1.sw - 60.r,
                              height: 44.r,
                              backgroundColor: Color(0xffeeeeee),
                              borderColor: Color(0xffdcdcdc),
                              verifySuccessListener: () {
                                state.isSlided = true;
                                logic.update();
                              },
                              verifyAction: () {
                                // if (!GetUtils.isPhoneNumber(state.nameCotroller.text)) {
                                //   EasyLoading.showToast('请输入正确的手机号');
                                //   return false;
                                // }
                                return true;
                              },
                            ),
                          ),
                        ),
                        state.loginType == 0
                            ? Container(
                                margin: EdgeInsets.only(top: 15.r),
                                height: 44.r,
                                child: TextField(
                                  controller: state.passCotroller,
                                  obscureText: !state.isShow,
                                  decoration: InputDecoration(
                                      contentPadding: EdgeInsets.symmetric(
                                          horizontal: 10.r),
                                      enabledBorder: OutlineInputBorder(
                                        borderSide: const BorderSide(
                                            color: ColorsUtil.dd, width: 0.5),
                                        borderRadius: BorderRadius.circular(5),
                                      ),
                                      focusedBorder: OutlineInputBorder(
                                        borderSide: const BorderSide(
                                            color: ColorsUtil.theme,
                                            width: 0.5),
                                        borderRadius: BorderRadius.circular(5),
                                      ),
                                      hintText: '请填写密码',
                                      hintStyle: TextStyle(
                                          fontSize: 16.sp,
                                          color: const Color(0xffdddddd)),
                                      suffixIcon: GestureDetector(
                                          onTap: logic.fixPasswordText,
                                          child: Container(
                                            padding: EdgeInsets.all(15.r),
                                            child: Image.asset(
                                              state.isShow
                                                  ? 'assets/images/login/eye_open.png'
                                                  : 'assets/images/login/eye_close.png',
                                              fit: BoxFit.fitWidth,
                                              width: 5,
                                              height: 5,
                                            ),
                                          ))),
                                ),
                              )
                            : Container(
                                child: CodeField(
                                  controller: state.smsCotroller,
                                  smsClickListener: logic.sendSms,
                                  sendAction: () {
                                    if (state.isSlided) {
                                      return true;
                                    }
                                    EasyLoading.showToast('请拖动滑块验证');
                                    return false;
                                  },
                                  timeCount: 60,
                                  isLineStyle: false,
                                  height: 44.r,
                                  fillColor: Colors.white,
                                ),
                              ),
                        GestureDetector(
                          child: Container(
                            decoration: BoxDecoration(
                                borderRadius:
                                    BorderRadius.all(Radius.circular(5.r)),
                                color: ColorsUtil.theme),
                            height: 44.r,
                            margin: EdgeInsets.only(top: 50.r),
                            child: Center(
                              child: Text(
                                '立即登录',
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 14.sp,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                            ),
                          ),
                          onTap: () {
                            logic.login();

                            // TopImModule.init('857751635#mychat');
                            // TopImModule.joinSingleRoom();
                          },
                        ),
                        GestureDetector(
                          child: Container(
                            decoration: BoxDecoration(
                                borderRadius:
                                    BorderRadius.all(Radius.circular(5.r)),
                                color: ColorsUtil.bg),
                            height: 44.r,
                            margin: EdgeInsets.only(top: 15.r),
                            child: Center(
                              child: Text(
                                state.loginType == 1 ? '密码登录' : '短信验证码登录',
                                style: TextStyle(
                                  color: ColorsUtil.title,
                                  fontSize: 14.sp,
                                ),
                              ),
                            ),
                          ),
                          onTap: () {
                            logic.changeLoginType();
                          },
                        ),
                        GestureDetector(
                          onTap: logic.check,
                          child: Container(
                            padding: EdgeInsets.symmetric(vertical: 15.r),
                            child: Text.rich(TextSpan(children: [
                              WidgetSpan(
                                child: Icon(
                                  state.isChecked
                                      ? IconUtil.check_y
                                      : IconUtil.check_n,
                                  size: 17.r,
                                  color: state.isChecked
                                      ? ColorsUtil.theme
                                      : ColorsUtil.content,
                                ),
                              ),
                              WidgetSpan(
                                child: SizedBox(
                                  width: 8.r,
                                ),
                              ),
                              TextSpan(
                                text: '我已阅读并同意',
                                style: TextStyle(
                                    color: const Color.fromRGBO(0, 0, 0, 0.6),
                                    fontSize: 14.sp),
                              ),
                              TextSpan(
                                text: '《用户协议》',
                                style: TextStyle(
                                    color: ColorsUtil.theme, fontSize: 14.sp),
                                recognizer: TapGestureRecognizer()
                                  ..onTap = () {},
                              ),
                              TextSpan(
                                text: '和',
                                style: TextStyle(
                                    color: const Color.fromRGBO(0, 0, 0, 0.6),
                                    fontSize: 14.sp),
                              ),
                              TextSpan(
                                text: '《隐私政策》',
                                style: TextStyle(
                                  color: ColorsUtil.theme,
                                  fontSize: 14.sp,
                                ),
                                recognizer: TapGestureRecognizer()
                                  ..onTap = () {},
                              ),
                            ])),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }

  Widget getLoginItem({
    required String icon,
    required String name,
    required VoidCallback onTap,
  }) {
    return InkWell(
      onTap: onTap,
      child: Column(
        children: [
          Image.asset(
            icon,
            width: 40,
            height: 40,
          ),
          Container(
            margin: EdgeInsets.fromLTRB(28.r, 12.5.r, 28.r, 0),
            // margin: const EdgeInsets.only(top: 12.5),
            child: Text(
              name,
              style: TextStyle(color: ColorsUtil.subTitle, fontSize: 13.sp),
            ),
          )
        ],
      ),
    );
  }
}
